<template>
  <div id="title" v-if="istitle">
    <div class="title_string">{{title!=''?title:$route.meta.title}}</div>
    <div class="group">
      <div class="left-group">
        <md-icon class="back_btn" name="snyc_nav_fh" @click="goBack()" v-if="showBack"></md-icon>
        <slot name="left"></slot>
      </div>

      <div class="right-group">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/svgs/snyc_nav_fh.svg';
import Utils from '@/common/pakjUtils';
import { Icon } from 'mand-mobile';
export default {
  name: 'top-bar',
  data() {
    return {
      istitle: true
    };
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    showBack: {
      type: Boolean,
      default: true
    }
  },
  components: {
    [Icon.name]: Icon
  },
  mounted() {
    if (Utils.isWeixinBroswer()) {
      if (Utils.isMiniProgram()) {
        // this.istitle = true;
        this.istitle = false;
      } else {
        this.istitle = false;
      }
    }
    if (Utils.isApp()) {
      this.istitle = false;
    }
  },
  methods: {
    goBack() {
      this.$emit('goback');
      this.$router.go(-1);
    }
  },
  computed: {
    hasLeftSlot() {
      return !!this.$slots['left'];
    },
    hasRightSlot() {
      return !!this.$slots['right'];
    }
  }
};
</script>

<style lang="stylus" scoped>
#title {
  height: 88px;
  background-color: #fff;
  padding-left: 30px;
  padding-right: 30px;

  .title_string {
    font-size: font-heading-medium;
    font-weight: font-weight-medium;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 22px;
    line-height: 44px;
  }

  .group {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    top: 22px;
    left: 0;
    right: 0;
    line-height: 44px;

    .left-group {
      display: flex;
      flex-direction: row;

      .back_btn {
        width: 22px;
        height: 38px;
      }
    }

    .right-group {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }
  }
}
</style>
